<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
   <head>
      <title>floatz - Test page for skiplink navigation</title>
      <meta http-equiv="content-type" content="text/html; CHARSET=utf-8" />
      <meta http-equiv="content-script-type" content="text/javascript" />
      <meta http-equiv="content-style-type" content="text/css" />
      <meta http-equiv="content-language" content="en" />
      <meta name="author" content="" />
      <meta name="robots" content="index,follow" />
      <meta name="description" content="" />
      <!-- for testing shrinked version -->
      <link rel="stylesheet" type="text/css" href="../../floatz/floatz.fixed.css" />
      <!-- <link rel="stylesheet" type="text/css" href="../../floatz/floatz.liquid.css" /> -->
      <script type="text/javascript" src="../../floatz/scripts/jquery-1.7.2.min.js"></script>
      <script type="text/javascript" src="../../floatz/scripts/floatz.js"></script>
      <!-- for testing development version -->
      <!-- <link rel="stylesheet" type="text/css" href="../src/floatz.layout.fixed.css" /> -->
      <!-- <link rel="stylesheet" type="text/css" href="../src/floatz.layout.liquid.css" /> -->
      <!-- <link rel="stylesheet" type="text/css" href="../src/debug/floatz.layout.debug.css" /> -->
      <!-- <script type="text/javascript" src="../src/scripts/jquery-1.7.2.min.js"></script> -->
      <!-- <script type="text/javascript" src="../src/scripts/floatz.js"></script> -->
      <script type="text/javascript" src="scripts/demo.js"></script>
      <style type="text/css">
         body {
            background-color: #efefef;
         }

         .myheader {
            height: 5em;
         }

         .mycontent {
            padding-top: 2em;
         }

         .mycontent h1, .mycontent h2, .mycontent p, .mycontent ul {
            margin-bottom: 1em;
         }
         
         .mycontent .backtotop {
            padding: 1em 0;
         }
  
         .myfooter {
            height: 2em;
         }        
      </style>
   </head>
   <body>
      <!-- page container -->
      <div id="flz_page">
         <!-- skiplink navigation -->
         <div class="flz_skipnav">
            <a class="flz_skiplink" href="#menu">Skip to menu</a>
            <a class="flz_skiplink" href="#submenu">Skip to submenu</a>
            <a class="flz_skiplink" href="#content">Skip to content</a>
         </div>
         <!-- header container -->
         <div class="flz_box flz_relative myheader">
            <ul class="flz_listnav flz_topnav">
               <li class="flz_selected"><a href="#">Item 1</a> |</li>
               <li><a href="#">Item 2</a> |</li>
               <li><a href="#">Item 3</a> |</li>
               <li><a href="#">Item 4</a></li>
            </ul>
            header
         </div>
         <!-- menu container -->
         <div class="flz_box mymenu">
            <a id="menu" class="flz_anchor"></a>
            <div class="flz_box flz_hmenu">
               <ul>
                  <li class="flz_selected"><a href="#">Menu 1</a></li>
                  <li><a href="#">Menu 2</a></li>
                  <li><a href="#">Menu 3</a></li>
                  <li><a href="#">Menu 4</a></li>
               </ul>
            </div>
         </div>
         <!-- sidebar container -->
         <div class="flz_box mysidebar flz_l25">
            <a id="submenu" class="flz_anchor"></a>
            <div class="flz_box flz_vmenu">
               <ul>
                  <li class="flz_selected"><a href="#">Menu 1</a>
                     <ul>
                        <li><a href="#">Menu 1</a>
                           <ul>
                              <li><a href="#">Menu 1</a>
                                 <ul>
                                    <li><a href="#">Menu 1</a>
                                       <ul>
                                          <li><a href="#">Menu 1</a></li>
                                          <li><a href="#">Menu 2</a></li>
                                       </ul>
                                    </li>
                                    <li><a href="#">Menu 2</a></li>
                                 </ul>
                              </li>
                              <li><a href="#">Menu 2</a></li>
                           </ul>
                        </li>
                        <li><a href="#">Menu 2</a></li>
                     </ul>
                  </li>
                  <li><a href="#">Menu 2</a></li>
                  <li><a href="#">Menu 3</a></li>
                  <li><a href="#">Menu 4</a></li>
                  <li><a href="#">Menu 5</a></li>
               </ul>
            </div>
         </div>
         <!-- content container -->
         <div class="flz_box mycontent flz_r75 flz_relative">
            <a id="content" class="flz_anchor"></a>
            <ul class="flz_listnav flz_breadcrumb">
               <li class="flz_selected"><a href="#">Item 1</a> &gt;</li>
               <li><a href="#">Item 2</a> &gt;</li>
               <li><a href="#">Item 3</a> &gt;</li>
               <li><a href="#">Item 4</a></li>
            </ul>
            <div class="flz_spacer">
               <a id="top" class="flz_anchor"></a>
               <h1>Lorem ipsum</h1>
               <p>
                  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
               </p>
               <!-- skiplink navigation within document -->
               <ul class="flz_skipnav">
                  <li><a href="#loremipsum1">Lorem ipsum 1</a></li>
                  <li><a href="#loremipsum2">Lorem ipsum 2</a></li>
                  <li><a href="#loremipsum3">Lorem ipsum 3</a></li>
                  <li><a href="#loremipsum4">Lorem ipsum 4</a></li>
               </ul>
               <a id="loremipsum1" class="flz_anchor"></a>
               <h2>Lorem ipsum 1</h2>
               <div class="flz_box flz_l50">
                  <div class="flz_lsubspacer">
                     Lorem ipsum dolor sit amet, <a href="#">consetetur</a> sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
                  </div>
               </div>
               <div class="flz_box flz_r50">
                  <div class="flz_rsubspacer">
                     Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
                  </div>
               </div>
               <div class="flz_box flz_skipnav backtotop">
                  <a href="#top">Back to top</a>
               </div>
               <a id="loremipsum2" class="flz_anchor"></a>
               <h2>Lorem ipsum 2</h2>
               <div class="flz_box flz_l50">
                  <div class="flz_lsubspacer">
                     Lorem ipsum dolor sit amet, <a href="#">consetetur</a> sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
                  </div>
               </div>
               <div class="flz_box flz_r50">
                  <div class="flz_rsubspacer">
                     Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
                  </div>
               </div>
               <div class="flz_box flz_skipnav backtotop">
                  <a href="#top">Back to top</a>
               </div>
               <a id="loremipsum3" class="flz_anchor"></a>
               <h2>Lorem ipsum 3</h2>
               <div class="flz_box flz_l50">
                  <div class="flz_lsubspacer">
                     Lorem ipsum dolor sit amet, <a href="#">consetetur</a> sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
                  </div>
               </div>
               <div class="flz_box flz_r50">
                  <div class="flz_rsubspacer">
                     Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
                  </div>
               </div>
               <div class="flz_box flz_skipnav backtotop">
                  <a href="#top">Back to top</a>
               </div>
               <a id="loremipsum4" class="flz_anchor"></a>
               <h2>Lorem ipsum 4</h2>
               <div class="flz_box flz_l50">
                  <div class="flz_lsubspacer">
                     Lorem ipsum dolor sit amet, <a href="#">consetetur</a> sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
                  </div>
               </div>
               <div class="flz_box flz_r50">
                  <div class="flz_rsubspacer">
                     Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
                  </div>
               </div>
               <div class="flz_box flz_skipnav backtotop">
                  <a href="#top">Back to top</a>
               </div>
            </div>
         </div>
         <!-- footer container -->
         <div class="flz_box myfooter flz_r100">
            footer
         </div>
      </div>
   </body>
</html>
